<template>
  <div>
    <!-- <searchHeader/> -->
    <main class="recomContent" >
      <div class="authorAndcomment" v-for="(recom,a) in recommendList" :key="a" @click="tabXiao">
        <div v-if="recom.content != ''">
          <!-- 作者 -->
          <div v-if="recom.author != null" class="authorPopup">
            <router-link :to="'/authorXQ/'+recom.author.id">
              <img :src="recom.author.cover" alt>
              <p class="authorName">
                <span v-text="recom.author.name"></span>
              </p>
            </router-link>
            <p class="authorAngle" @click="copyClick">
              <span class="fa fa-angle-down"></span>
            </p>
          </div>
          <div v-else>
             <router-link v-if="recom.user != null" :to="'/userXQ/' + recom.user.uid">
            <div class="userPublish">
              <img :src="recom.user.avatar">
              <p v-text="recom.user.nickname"></p>
            </div>
          </router-link>
          </div>
          <!-- 内容 -->
          <div v-if="recom.uuid != ''">
            <router-link :to="'/xiangqing/' + recom.uuid">
            <div v-if="recom.content != null" class="authorAllcontent">
              <p v-text="recom.content" class="authorPublish"></p>
            </div>
            <img class="authorBackgrondImg" v-if="recom.image != null" :src="recom.image.url" alt>
          </router-link>
          </div>
          
          <!-- 发表者 -->
          <router-link v-if="recom.user != null" :to="'/userXQ/' + recom.user.uid">
            <div v-if="recom.author != null" class="userPublish">
              <img :src="recom.user.avatar">
              <p v-text="recom.user.nickname"></p>
            </div>
          </router-link>

          <!-- 底部 点赞 -->
          <div v-if="recom.content != ''" class="userFoot">
            <p >
              
              <span class="fa fa-heart-o"></span>
              <span style="font-size:3vw;" v-text="recom.like_count"></span>
            </p>
            <p>
              <router-link :to="'/xiangqing/' + recom.uuid">
              <span class=" fa fa-commenting-o"></span>
              <span style="font-size:3vw;" v-text="recom.comment_count"></span>
              </router-link>
            </p>
            <p >
              <!-- <span v-text="recom"></span> -->
              <span class="fa fa-bookmark-o"></span>
            </p>
            <p class="fa fa-share-square-o"></p>
          </div>
        </div>
      </div>
    </main>
    <popup
      :show-mask="false"
      v-model="isShow"
      position="bottom"
      :popup-style="{zIndex:999}"
      class="copyShow"
      height="30vw"
    >
      <p @click="copyText">复制文字</p>
      <p @click="cancel">取消</p>
    </popup>
  </div>
</template>
<script>
import { Popup } from "vux";
export default {
  data() {
    return {
      recommendList: [],
      isShow: false,
      status: "loading",
      loadingMore: false
    };
  },
  components: {
    Popup
  },
  mounted() {
    this.getRecommendInfo();
  },
  methods: {
    getRecommendInfo: function() {
      var _this = this;
      this.$http
        .get(
          "/judou/api/v6/op/channels/18?page=1&per_page=20&token=edd704412ee957bc1594c902f172b9c8&timestamp=1545183440&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=428be589079cc623dc2f6ca38ddfcaee"
        )
        .then(function(value) {
          _this.recommendList = value.body.data;
          // console.log(_this.recommendList);
        });
    },
    copyClick: function() {
      console.log(123123);
      this.isShow = !this.isShow;
    },
    cancel: function() {
      this.isShow = false;
    },
    copyText: function() {
      this.isShow = false;
      alert("复制成功");
    },
    tabXiao:function(){
      $('.weui-tabbar').hide()
    }
  }
};
</script>

<style scoped>
a:-webkit-any-link{
  text-decoration: none;
  color: black;
}
.recomContent {
  height: 1000vw;
  position: relative;
  overflow-y: auto;
}
.authorAndcomment {
  width: 98vw;
  /* height: 40vw; */
  border-top: 3vw solid rgb(248, 247, 243);
}
.authorPopup {
  width: 96vw;
  height: 10vw;
  display: flex;
  position: relative;
  /* border: 1px solid blue; */
}
.authorPopup img {
  width: 8vw;
  height: 8vw;
  margin: 1vw;
}
.authorName {
  margin: -9vw 10vw;
  font-size: 4.5vw;
  /* border: 1px solid black; */
}
.authorAngle {
  position: absolute;
  right: 3vw;
}
.copyShow{
  position: absolute;
  bottom:26vw;
}
.copyShow p {
  text-align: center;
  line-height: 15vw;
  color: rgb(160, 150, 150);
}
.copyShow > p {
  border-bottom: 1px solid rgb(230, 222, 222);
}
.authorAllcontent {
  padding: 2vw;
}
.authorPublish {
  width: 96vw;
  font-size: 4vw;
  overflow: hidden;
  white-space: wrap;
  text-overflow: ellipsis;
}
.authorBackgrondImg {
  margin-left: 2vw;
  width: 96vw;
  height: 40vw;
  border-radius: 2vw;
}
.userPublish {
  display: flex;
  padding-bottom: 2vw;
  padding-left: 2vw;
}
.userPublish img {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  margin-top: 2vw;
}
.userPublish > p {
  font-size: 3vw;
  /* margin: 2vw; */
}
.userFoot {
  width: 94vw;
  height: 5vw;
  display: flex;
  justify-content: space-between;
  padding: 2vw;
  font-size: 5vw;
}
</style>
